<template>
    <div>
        <el-card class="box-card">
            <div>
                <div v-show="flag">
                    <div
                        style="background-color: antiquewhite;border: 1px solid black;width: 50%;height: 700px;margin: auto">
                        <div style="margin-top: 20px">
                            <el-image :src="require('../img/'+bookList.pic)" style="width: 140px;height: 180px;"/>
                        </div>
                        <div><p style="font-size: 50px" v-text="bookList.title"></p></div>
                        <div style="margin-right: 410px"><p style="font-size: 25px;" v-text="bookList.tag"></p>
                            <p style="margin-top: -20px">类型</p></div>
                        <div style="margin-top: -82px"><p style="font-size: 25px;" v-text="bookList.create_time"></p>
                            <p style="margin-top: -20px">上架</p></div>
                        <div style="margin-left: 410px;margin-top: -79px"><p style="font-size: 25px;"
                                                                             v-text="bookList.word"></p>
                            <p style="margin-top: -22px">连载(字)</p></div>
                        <div style="margin-top: 100px"><p>本书由纵横阅读网进行电子制作和发行</p>
                            <p style="margin-top: -15px;font-size: 20px;opacity:0.3;">©版本所有 侵权必究</p></div>
                    </div>
                </div>
                <div style="margin: 100px 0px 50px 0px;">
                    <div class="acc"
                         style="background-color: antiquewhite;border: 1px solid black;width: 50%;height: auto;margin: auto"
                         v-for="(i,index) in chapter.list" :key="index">
                        <div style="margin-top: 90px"><p style="font-size: 30px;text-align: left;margin-left: 50px;"
                                                         v-text="i.title"></p></div>
                        <div><p style="font-size: 22px;text-align: left;margin-left: 20px" v-for="(i,index) in section"
                                :key="index"
                                v-text="i+'。'"></p></div>
                    </div>
                </div>
                <!--                随屏幕滚动-->
                <div class="fixed" id="searchBar" style="">
                    <div style="width: 100px;" v-for="(i,index) in chapter.list" :key="index">
                        <el-button
                            style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 10px;margin-left: 10px"
                            @click="lastTitle(i)"><b class="el-icon-caret-top"></b><br>上一章
                        </el-button>

                        <el-button style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 5px;"
                                   @click="contents">目录
                        </el-button>

                        <el-button style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 5px;"
                                   @click="nextTitle(i)">下一章<br><b class="el-icon-caret-bottom"></b></el-button>
                        <el-button  @click="comment(i)"
                                   style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 5px;">评论
                        </el-button>

                    </div>
                </div>
                <div class="fixtd" id="searchBar1" style="">
                    <div style="width: 100px;">
                    <el-button style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 5px;margin-left: 10px" @click="bookShelf">书架</el-button>
                    <el-button style="width: 80px;height: 100px;background-color: antiquewhite;margin-top: 5px;" @click="workInfo">详情页</el-button>
                    </div>
                </div>
                <div >
                    <el-drawer
                        title="我是标题"
                        :visible.sync="drawer"
                        :before-close="handleClose"
                        :with-header="false" >
                        <div v-if="showComment" >
                            <h1>用户评论</h1>
                            <div>
                                <el-input style="width: 550px;"
                                          type="textarea"
                                          placeholder="请输入内容"
                                          v-model="textareb"
                                          :autosize="{ minRows: 4, maxRows: 6}"
                                          maxlength="150"
                                          show-word-limit
                                          resize="none"
                                >
                                </el-input>
                                <div style="padding-left: 462px;position: relative;margin-top: -45px" v-for="(i,index) in chapter.list" :key="index">
                                    <el-button type="info" v-if="textareb===''">发表</el-button>
                                    <el-button v-else @click="comit(i)">发表</el-button>
                                </div>
                            </div>

                            <div><p>共{{commentCount}}条评论</p></div>

                            <div v-if="commentCount===0">
                                <el-divider></el-divider>
                                <p>暂无评论</p></div>
                            <div v-else>
                                <div v-for="(i,index) in commentList" :key="index"
                                     style="text-align: left;height: 170px;border: 1px solid black">
                                    <div style="position: absolute">
                                        <el-avatar :src="require('../img/'+i.bookUser.headimgurl)"
                                                   style="height: 80px;width: 80px"></el-avatar>
                                    </div>
                                    <div style="position: relative;margin-left: 100px"><p
                                        style="font-size: 20px;color: #1d73f6">{{i.bookUser.username}}</p></div>
                                    <div style="position: relative;margin-left: 100px;bottom: 10px"><p
                                        style="font-size: 12px">{{i.create_time}}</p></div>
                                    <div style="position: relative"><p>{{i.content}}</p>
                                        <el-button style="border: none" @click="hf(i)">回复</el-button>
                                        <a href="#" v-if="uptrue" @click="upedit(i)"
                                           style="text-decoration: none;color: black"><img
                                            src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/70105696c5f0.png"
                                            style="width: 15px;height: 15px"/>{{i.up}}</a>
                                        <a href="#" v-else @click="upedit(i)"
                                           style="text-decoration: none;color: black"><img
                                            src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/d703b36c0eb8.png"
                                            style="width: 15px;height: 15px"/>{{i.up}}</a>
                                        <el-button v-show="i.bookUser.username===username" @click="delComm(i)">删除</el-button>
                                    </div>
                                    <el-divider></el-divider>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <h1 style="position: absolute;margin-left: 190px">查看回复</h1>
                            <el-button style="position: relative;margin-right: 400px;margin-top: 20px" @click="next">返回评论</el-button>
                            <el-divider></el-divider>
                            <div v-for="(i,index) in replyList" :key="index"
                                 style="text-align: left;height: 170px;padding-top: 1px">
                                <div style="position: absolute">
                                    <el-avatar :src="require('../img/'+i.bookUser.headimgurl)"
                                               style="height: 80px;width: 80px"></el-avatar>
                                </div>
                                <div style="position: relative;margin-left: 100px"><p
                                    style="font-size: 20px;color: #1d73f6">{{i.bookUser.username}}</p></div>
                                <div style="position: relative;margin-left: 100px;bottom: 10px"><p
                                    style="font-size: 12px">{{i.create_time}}</p></div>
                                <div style="position: relative"><p>{{i.content}}</p>
                                    <el-button style="border: none" @click="showText(i)">回复</el-button>
                                    <a href="#" v-if="uptrue" @click="upedit(i)"
                                       style="text-decoration: none;color: black"><img
                                        src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/70105696c5f0.png"
                                        style="width: 15px;height: 15px"/>{{i.up}}</a>
                                    <a href="#" v-else @click="upedit(i)"
                                       style="text-decoration: none;color: black"><img
                                        src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/d703b36c0eb8.png"
                                        style="width: 15px;height: 15px"/>{{i.up}}</a>
                                    <el-button v-show="i.bookUser.username===username">删除</el-button>
                                </div>
                                <div v-show="showTextA" style="margin-top: 10px;margin-left: 20px">
                                    <el-input style="width: 550px;"
                                              type="textarea"
                                              :placeholder="place"
                                              v-model="textarea"
                                              :autosize="{ minRows: 4, maxRows: 6}"
                                              maxlength="150"
                                              show-word-limit
                                              resize="none"
                                    >
                                    </el-input>
                                    <div style="padding-left: 430px;position: relative;margin-top: -45px">
                                        <div style="position: absolute;left: 10px">
                                            <el-button @click="showTextA = false">取消</el-button>
                                        </div>
                                        <div style="position: relative;margin-left: 50px">
                                            <el-button type="info" v-if="textarea===''">回复</el-button>
                                            <el-button v-else @click="reply(i)">回复</el-button>
                                        </div>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                                <div></div>
                                <div :class="'input1'+index"   v-for="(y,index) in i.list" :key="index" style="padding-top: 1px">
                                    <div style="position: absolute">
                                        <el-avatar :src="require('../img/'+i.bookUser.headimgurl)"
                                                   style="height: 80px;width: 80px"></el-avatar>
                                    </div>
                                    <div style="position: relative;margin-left: 100px"><p
                                        style="font-size: 20px;color: #1d73f6">{{y.bookUser.username}}</p></div>
                                    <div style="position: relative;margin-left: 100px;bottom: 10px"><p
                                        style="font-size: 12px">{{y.create_time}}</p></div>
                                    <div style="position: relative"><p>{{y.content}}</p>
                                        <a href="#" v-if="uptrue" @click="upedit(y)"
                                           style="text-decoration: none;color: black"><img
                                            src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/70105696c5f0.png"
                                            style="width: 15px;height: 15px"/>{{y.up}}</a>
                                        <a href="#" v-else @click="upedit(y)"
                                           style="text-decoration: none;color: black"><img
                                            src="https://imgservices-1252317822.image.myqcloud.com/image/20190622/d703b36c0eb8.png"
                                            style="width: 15px;height: 15px"/>{{y.up}}</a>
                                        <el-button v-show="i.bookUser.username===username">删除</el-button>
                                    </div>

                                    <div :class="'input'+index"  style="margin-top: 10px;margin-left: 20px">

                                    </div>
                                    <el-divider></el-divider>
                                </div>
                            </div>
                        </div>
                    </el-drawer>
                </div>
                <div style="width: 50%;margin: auto;background-color: antiquewhite;height: 60px"
                     v-for="(i,index) in chapter.list" :key="index">
                    <el-button style="width: 32%;height: 60px;background-color: antiquewhite;border: 1px solid black"
                               @click="lastTitle(i)"><b class="el-icon-caret-left"></b>上一章
                    </el-button>
                    <el-button style="width: 32%;height: 60px;background-color: antiquewhite;border: 1px solid black"
                               @click="contents">目录
                    </el-button>

                    <el-button style="width: 32%;height: 60px;background-color: antiquewhite;border: 1px solid black"
                               @click="nextTitle(i)">下一章<b class="el-icon-caret-right"></b>
                    </el-button>
                </div>
            </div>
        </el-card>

        <el-tooltip placement="top" content="返回顶部">
            <back-to-top
                transitionName="fade"
                :customStyle="myBackToTopStyle"
                :visibilityHeight="300"
                :backPosition="50">
            </back-to-top>
        </el-tooltip>
        <div></div>
    </div>
</template>

<script>
    import BackToTop from '@/components/BackToTop'  //引用回到顶部BackToTop.vue
    export default {

        name: "Read",
        data() {
            return {
                token:sessionStorage.getItem("token"),
                textareb: '',
                showInput:true,
                place: '',
                showTextA: false,
                showComment: true,
                textarea: '',
                drawer: false,
                flag: true,
                uptrue: true,
                chapter: {},
                bookList: [],
                chapterArr: [],
                commentList: {},
                replyList: {},
                commentCount: null,
                newDate: null,
                newList:[],
                num : 0,
                username:localStorage.getItem("username"),
                //回到顶部样式
                myBackToTopStyle: {
                    'right': '415px',
                    'bottom': '200px',
                    'width': '40px',
                    'height': '40px',
                    'border-radius': '20px',
                    'line-height': '40px',
                    'background': '#fff'
                }
            }
        },
        //返回顶部组件
        components: {
            BackToTop,
        },

        created() {

            var aData = new Date();
            this.newDate = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
            this.$http.post("chapter/page", {
                novel_id: this.$route.query.id,
                m:'这一章',
                pageNum:this.$route.query.pageNum,
            },).then(response => {
                if (this.$route.query.pageNum > 1) {
                    this.flag = false
                }
                this.chapter = response.data;
            })
            this.$http.post("nove/findById", {id: this.$route.query.id}).then(response => {
                console.log(this.bookList)
                this.bookList = response.data;
            })

        },
        mounted() { //给window添加一个滚动滚动监听事件
            window.addEventListener("scroll", this.handleScroll);
        },
        destroyed() { //离开该页面需要移除这个监听的事件
            document.removeEventListener("scroll", this.handleScroll);
        },
        methods: {
            handleClose(done) {
                done();
               this.textarea='';
               this.textareb='';
            },
            bookShelf(){
              this.$router.replace({name:'BookShelf'});
            },
            workInfo(){
                this.$router.replace({name:'workinfo',query:{id:this.bookList.id,category:this.bookList.category}});
            },
            delComm(row){
                this.$http.post("comment/upd",{status:0,id:row.id}).then(response=>{
                    if(response.data){
                        this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        this.drawer=false;
                    }else{
                        this.$notify({
                            title: '成功',
                            message: '删除失败',
                            type: 'warning'
                        });
                    }
                })
            },
            comit(row){
                if(this.token===null){
                    this.$notify({
                        title: '登陆',
                        message: '请小主先登陆!',
                        type: 'warning'
                    });
                }else{
                    const list={
                        content:this.textareb,
                        uid:localStorage.getItem("id"),
                        up:0,
                        nove_id:row.novel_id,
                        chapter_id:row.id,
                        user_id:0,
                        create_time:this.newDate
                    }
                    this.$http.post("comment/save",list).then(response=>{
                        if(response.data){
                            this.$notify({
                                title: '成功',
                                message: '发表成功',
                                type: 'success'
                            });
                            this.$http.post("comment/count", {nove_id: row.novel_id, chapter_id: row.id}).then(response => {
                                this.commentCount = response.data;
                            })
                            this.$http.post("comment/list", {nove_id: row.novel_id, chapter_id: row.id}).then(response => {
                                this.commentList = response.data;
                            })
                            this.textareb='';
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '发表失败',
                                type: 'warning'
                            });
                            this.textareb='';
                        }
                    })
                }
            },
            next(){
                this.showComment=true;
            },
            showText(row) {
                this.showTextA = true;
                this.place = "回复" + row.bookUser.username
            },
            reply(row) {
                if(this.token===null){
                    this.$notify({
                        title: '成功',
                        message: '请小主先登陆!',
                        type: 'success'
                    });
                }else{
                    const list = {
                        content: this.textarea,
                        uid: localStorage.getItem("id"),
                        nove_id: row.nove_id,
                        chapter_id: row.chapter_id,
                        user_id: row.id,
                        up: 0,
                        create_time: this.newDate,
                    }
                    this.$http.post("comment/save", list).then(response => {
                        if (response.data) {
                            this.$notify({
                                title: '成功',
                                message: '回复成功',
                                type: 'success'
                            });
                            this.$http.post("comment/findById", {id: row.id}).then(response => {
                                this.replyList = response.data;
                            })
                            this.textarea=''
                            this.showTextA=false;
                        } else {
                            this.$notify({
                                title: '成功',
                                message: '回复失败',
                                type: 'warning'
                            });
                            this.textarea=''
                            this.showTextA=false;
                        }
                    })
                }
            },
            hf(row) {
                this.showComment = false;
                this.$http.post("comment/findById", {id: row.id}).then(response => {
                    this.replyList = response.data;
                    console.log(response.data);
                })
            },
            upedit(row) {
                if (this.uptrue) {
                    var up = row.up + 1
                    this.$http.post("comment/edit", {id: row.id, up: up}).then(response => {
                        if (response.data) {
                            this.uptrue = false;
                            const a = {
                                novel_id: row.nove_id,
                                id: row.chapter_id,
                            }
                            this.comment(a)
                        } else {
                            this.uptrue = true;
                        }
                    })
                } else {
                    var up = row.up - 1
                    this.$http.post("comment/edit", {id: row.id, up: up}).then(response => {
                        if (response.data) {
                            this.uptrue = true;
                            const a = {
                                novel_id: row.nove_id,
                                id: row.chapter_id,
                            }
                            this.comment(a)
                        } else {
                            this.uptrue = false;
                        }
                    })
                }
            },
            comment(row) {
                this.drawer = true;
                this.$http.post("comment/count", {nove_id: row.novel_id, chapter_id: row.id}).then(response => {
                    this.commentCount = response.data;
                })
                this.$http.post("comment/list", {nove_id: row.novel_id, chapter_id: row.id}).then(response => {
                    this.commentList = response.data;
                })
            },
            handleScroll() {
                const that = this;
                let scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;

                that.scrollTop = scrollTop;
                // 随屏幕滚动
                var offsetTop = document.querySelector('#searchBar').offsetTop;
                if (scrollTop <= 200) {
                    offsetTop = 300 - Number(scrollTop);
                    document.querySelector('#searchBar').style.top = offsetTop + 'px';
                } else {
                    document.querySelector('#searchBar').style.top = '100px';
                }
            },
            lastTitle(row) {
                if (this.chapter.pageNum>1) {
                    // var pageNum = id-1;
                    const that = this;
                    let timer = setInterval(() => {
                        let ispeed = Math.floor(-that.scrollTop / 10);
                        document.documentElement.scrollTop = document.body.scrollTop =
                            that.scrollTop + ispeed;
                        if (that.scrollTop === 0) {
                            clearInterval(timer);
                        }
                    }, 10);
                    if (sessionStorage.getItem("token") === null) {
                        this.$http.post("chapter/page", {
                            m:'上一章',
                            novel_id: this.bookList.id,
                            pageNum: this.chapter.pageNum,
                            pageSize: this.chapter.pageSize,
                        }).then(response => {
                            this.chapter = response.data;
                        })
                    } else {
                        const list = {
                            user_id: localStorage.getItem("id"),
                            nove_id: this.$route.params.id,
                            novel_chapter_id: row.id,
                            create_time: this.newDate
                        }
                        this.$http.post("state/save", list).then(response => {
                            console.log(response.data)
                        })
                        this.$http.post("chapter/page", {
                            novel_id: this.$route.params.id,
                            pageNum: this.chapter.pageNum,
                            pageSize: this.chapter.pageSize
                        }).then(response => {
                            console.log(response.data)
                            this.chapter = response.data;
                        })
                    }

                } else {
                    this.$message({
                        message: '亲爱的小主.已经没有额外章节了!',
                        type: 'success'
                    });
                }
            },
            contents() {
                this.$router.replace({
                    name: 'contents',
                    params: {id: this.bookList.id}
                })
            },
            nextTitle(row) {
                this.$http.post("chapter/newList",{novel_id:this.bookList.id}).then(response=>{
                    this.newList=response.data;
                    if (row.cid<this.newList.cid) {
                        //var pageNum = id+1;
                        this.flag = false;
                        const that = this;
                        let timer = setInterval(() => {
                            let ispeed = Math.floor(-that.scrollTop / 10);
                            document.documentElement.scrollTop = document.body.scrollTop =
                                that.scrollTop + ispeed;
                            if (that.scrollTop === 0) {
                                clearInterval(timer);
                            }
                        }, 10);
                        if (sessionStorage.getItem("token") === null) {
                            this.$http.post("chapter/page", {
                                m:'下一章',
                                novel_id: this.bookList.id,
                                pageNum: this.chapter.pageNum,
                                pageSize: this.chapter.pageSize,
                            }).then(response => {
                                this.chapter = response.data;
                            })
                        } else {
                            const list = {
                                user_id: localStorage.getItem("id"),
                                nove_id: this.bookList.id,
                                novel_chapter_id: row.id+1,
                                create_time: this.newDate
                            }
                            this.$http.post("state/save", list).then(response => {
                                console.log(response.data)
                            })
                            this.$http.post("chapter/page", {
                                m:"下一章",
                                novel_id: this.bookList.id,
                                pageNum: this.chapter.pageNum,
                                pageSize: this.chapter.pageSize
                            }).then(response => {
                                this.chapter = response.data;
                            })
                        }
                    } else {
                        this.$message({
                            message: '亲爱的小主.已经没有额外章节了!',
                            type: 'success'
                        });
                    }
                })
            },

        },
        computed: {
            section() {
                let split = null;
                for (let i = 0; i < this.chapter.list.length; i++) {
                    var chapter = this.chapter.list[i].chapter
                    split = chapter.split("。")
                }
                return split
            }
        }
    }
</script>

<style>
    .el-drawer.rtl {
        overflow: scroll
    }
</style>
<style scoped>

    .acc {
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .box-card {
        background-image: url("../img/37.jpg");
        background-size: 100% 100%;
        height: 100%;
    }
    .fixtd{
        position: fixed;
        width: 100px;
        bottom: 100px;
        top: 300px;
        left:380px;
        box-sizing: border-box;
        z-index: 2;
    }
    .fixed {
        position: fixed;
        width: 100px;
        bottom: 100px;
        top: 300px; /*开始处于距离顶部300px的位置，之后随着滚动条滚动top值改变，然后在top==100时停止*/
        left: 1410px;
        box-sizing: border-box;
        z-index: 2;
    }
</style>
